<template>
	<view class="order_detail_container"
		:style="{ 'background':  packageAll.color ? packageAll.color : bgcColor}"
		v-if="isPackageAll">
		<view class="home_box">
		<!-- 	<view class="" style="display: none;">
				{{imageUrl.packagesImgUrl + packageAll.package.head_img}}
			</view> -->
			<!-- top -->
			<!-- https://landing.card.zhongtuodianshang.cn/packages/ --><!-- images/3ce5b2180caf1e2fe2c79be07b306c52.png -->
			<view class="banner_img_box">
				<image :src="imageUrl.packagesImgUrl + packageAll.head_img" mode="widthFix" class="banner_img">
				</image>
			</view>
			<!-- 流量卡选项 -->
			<view class="package_tab_box" v-if="landingTemplateId == 2">
				<view class="package_tab_all" v-for="(item, index) in packageChooseList" :key="index"
					@click="handlerPackageTab(item, index)">
					<view class="tab_img_box">
						<image :src="imageUrl.packagesImgUrl + item.package.image" mode="" class="tab_img" style="">
						</image>
					</view>
					<view class="choose_icon_box" v-if="isActiveIcon == index">
						<image src="/static/home/icon-choose.png" mode="" class="choose_icon"></image>
					</view>
				</view>
			</view>

			<!-- content -->
			<view class="package_detail_box" id="packageBox">
				<view class="" v-if="selectStatus == 1 || landingTemplateId == 2
				">

					<!-- v-if="landingTemplateId == '' || landingTemplateId == 0 || landingTemplateId == 1" -->
					<view class="package_type_one">
						<!-- 搜索、靓号类型选择 -->
						<view class="package_search_box">
							<view class="search_all">
								<view class="search_input">
									<view class="search_icon_box">
										<image src="/static/home/icon-search.png" mode="" class="search_icon"></image>
									</view>
									<input type="number" v-model="searchValue" placeholder="请输入您喜欢的数字"
										placeholder-color="#999" maxlength="11" style="height: 70rpx;">
								</view>
								<view class="search_btn" @click="handlerSearch">
									搜索
								</view>
							</view>

							<!-- 靓号类型tab -->
							<view class="account_tab_all">
								<view class="account_tab"
									:class="[isActiveAcount == item.id ? 'account_tab_active' : '']"
									v-for="item in accountTabList" :key="item.id" @click="handlerAccountTab(item)">
									{{ item.name }}
								</view>
							</view>
						</view>

						<!-- 卡号列表 -->
						<view class="account_list_box" id="packageDetail">
							<view class="account_list_all"
								:class="[isAccountList == index ? 'account_list_all_active' : '']"
								v-for="(item, index) in accountList" :key="index"
								@click="handlerAccountList(item, index)">
								<span class="" v-for="(items, indexs) in String(item.phoneNum)" :key="indexs"
									:class="[item.phoneColors[indexs] == '1' ? 'account_num_active' : 'account_num']"
									style="text-align: center;">
									{{items}}
								</span>
								<view class="account_tip_box">
									<view class="left_box">
										<view class="now_price">￥0</view>
										<view class="limited_time">
											{{ item.phonePrice }}
										</view>
									</view>
									<view class="free_collection">
										{{ item.phoneText }}
									</view>
								</view>
							</view>
						</view>

						<!-- 分页 -->
						<view class="package_page_box">
							<view class="previous_page">
								<button type="warn" :disabled="isPreviousBtn" @click="handlerPrevious"
									class="previous_btn">上一页</button>
							</view>
							<view class="next_page">
								<button type="warn" :disabled="isNextBtn" @click="handlerNext"
									class="previous_btn">下一页</button>
							</view>
						</view>

						<view class="read_check">
							<checkbox-group @change="checkboxGroupChange">
								<label class="read_title">
									<checkbox value="checkMsg" />我已阅读
								</label>
							</checkbox-group>
							<span style="color: #FF7C00;"><span @click="handlerAgreement">《入网协议》</span>
								<span @click="handlerCollect">《信息收集公告》</span></span>
						</view>
					</view>

					<!-- 套餐模板2 -->
					<!-- 	<view class="package_type_two" v-if="landingTemplateId == 2">
						
						
						<view class="package_search_box">
							<view class="search_all">
								<view class="search_input">
									<input type="number" v-model="searchValue" placeholder="请输入您喜欢的数字"
										placeholder-color="#999" maxlength="11" style="height: 70rpx;">
								</view>
								<view class="search_btn" @click="handlerSearch">
									搜索
								</view>
							</view>

							
							
							<view class="account_tab_all">
								<view class="account_tab"
									:class="[isActiveAcount == item.id ? 'account_tab_active' : '']"
									v-for="item in accountTabList" :key="item.id" @click="handlerAccountTab(item)">
									{{ item.name }}
								</view>
							</view>
						</view>

					
					
						<view class="account_list_box" id="packageDetail">
							<view class="account_list_all"
								:class="[isAccountList == item.id ? 'account_list_all_active' : '']"
								v-for="(item, index) in accountList" :key="index"
								@click="handlerAccountList(item, index)">
								<span class="" v-for="(items, indexs) in String(item.phoneNum)" :key="indexs"
									:class="[item.phoneColors[indexs] == '1' ? 'account_num_active' : 'account_num']"
									style="text-align: center;">

									{{items}}
								</span>
								<view class="account_tip_box">
									<view class="left_box">
										<view class="now_price">￥0</view>
										<view class="limited_time">
											{{ item.phonePrice }}
										</view>
									</view>
									<view class="free_collection">
										{{ item.phoneText }}
									</view>
								</view>
							</view>
						</view>

						
						
						<view class="package_page_box">
							<view class="previous_page">
								<button type="warn" :disabled="isPreviousBtn" @click="handlerPrevious"
									class="previous_btn">上一页</button>
							</view>
							<view class="next_page">
								<button type="warn" :disabled="isNextBtn" @click="handlerNext"
									class="previous_btn">下一页</button>
							</view>
						</view>

						<view class="read_check">
							<checkbox-group @change="checkboxGroupChange">
								<label class="read_title">
									<checkbox value="checkMsg" />我已阅读
								</label>
							</checkbox-group>
							<span style="color: #FF7C00;"><span @click="handlerAgreement">《入网协议》</span>
								<span @click="handlerCollect">《信息收集公告》</span></span>
						</view>
					</view> -->

					<!-- 套餐模板3 -->
					<!-- <view class="package_type_three" v-if="landingTemplateId == 3">
						 
						<view class="package_search_box">
							<view class="search_all">
								<view class="search_input">
									<input type="number" v-model="searchValue" placeholder="请输入您喜欢的数字"
										placeholder-color="#999" maxlength="11" style="height: 70rpx;">
								</view>
								<view class="search_btn" @click="handlerSearch">
									搜索
								</view>
							</view>

							 
							<view class="account_tab_all">
								<view class="account_tab"
									:class="[isActiveAcount == item.id ? 'account_tab_active' : '']"
									v-for="item in accountTabList" :key="item.id" @click="handlerAccountTab(item)">
									{{ item.name }}
								</view>
							</view>
						</view>

						 
						<view class="account_list_box" id="packageDetail">
							<view class="account_list_all"
								:class="[isAccountList == item.id ? 'account_list_all_active' : '']"
								v-for="(item, index) in accountList" :key="index"
								@click="handlerAccountList(item, index)">
								<span class="" v-for="(items, indexs) in String(item.phoneNum)" :key="indexs"
									:class="[item.phoneColors[indexs] == '1' ? 'account_num_active' : 'account_num']"
									style="text-align: center;">

									{{items}}
								</span>
								<view class="account_tip_box">
									<view class="left_box">
										<view class="now_price">￥0</view>
										<view class="limited_time">
											{{ item.phonePrice }}
										</view>
									</view>
									<view class="free_collection">
										{{ item.phoneText }}
									</view>
								</view>
							</view>
						</view>

						 
						<view class="package_page_box">
							<view class="previous_page">
								<button type="warn" :disabled="isPreviousBtn" @click="handlerPrevious"
									class="previous_btn">上一页</button>
							</view>
							<view class="next_page">
								<button type="warn" :disabled="isNextBtn" @click="handlerNext"
									class="previous_btn">下一页</button>
							</view>
						</view>

						<view class="read_check">
							<checkbox-group @change="checkboxGroupChange">
								<label class="read_title">
									<checkbox value="checkMsg" />我已阅读
								</label>
							</checkbox-group>
							<span style="color: #FF7C00;"><span @click="handlerAgreement">《入网协议》</span>
								<span @click="handlerCollect">《信息收集公告》</span></span>
						</view>
					</view> -->
				</view>






				<!-- 不选号，之前显示表单 -->
				<view class="account_box" id="packageDetailNoChoose" v-else>
					<!-- 图片 -->
					<view class="account_tip_img_box">
						<image src="/static/home/img-tip.png" mode="" class="account_tip_img"></image>
					</view>

					<view class="popup_account_all">
						<view class="buy-recipients-all">
							<view class="buy-recipients-input-title">姓名</view>
							<input placeholder="请填写身份证姓名(已加密)" placeholder-style="font-size: 24rpx;" :border="false"
								v-model="applicantModel.userInfo.recipientsName">
							<!-- @input="blurName" -->
							</input>
						</view>
						<view class="buy-recipients-all">
							<view class="buy-recipients-input-title">联系电话 </view>
							<input placeholder="请填写收件电话(已加密)" placeholder-style="font-size: 24rpx;" :border="false"
								maxlength="11" v-model="applicantModel.userInfo.recipientsPhone" @input="blurPhone">
							</input>
						</view>
						<view class="" v-if="isShowPersonMsg">
							<!-- <view class="buy-applicant-input-box"
								v-if="applicantModel.userInfo.recipientsName !== applicantModel.userInfo.name">
								<view class="buy-applicant-input-title">身份证姓名</view>
								<input v-model="applicantModel.userInfo.name" :border="false"
									placeholder="请输入身份证姓名(已加密)" placeholder-style="font-size: 24rpx;" />
							</view> -->
							<view class="buy-applicant-input-box">
								<view class="buy-applicant-input-title">身份证</view>
								<input placeholder="请输入身份证号码(已加密)" placeholder-style="font-size: 24rpx;" maxlength="18"
									:border="false" v-model="applicantModel.userInfo.number">
								</input>
							</view>
							<view class="buy-recipients-all">
								<view class="buy-recipients-input-title">所在地区</view>
								<picker class="pickerList" mode="multiSelector" :range="newProvinceDataList"
									:value="multiIndex" @change="pickerChange" @columnchange="pickerColumnchange">
									<view class="" style="font-size: 24rpx; color: #808080;">{{select}}</view>
								</picker>
							</view>

							<view class="buy-recipients-all">
								<input placeholder="请输入详细地址(*街道*小区*门牌号)"
									placeholder-style="font-size: 24rpx;color: #c14953;" :border="false"
									v-model="applicantModel.userInfo.recipientsAddress" style="width: 100%;">
								</input>
							</view>
						</view>

						<view class="read_box">
							<view class="submit_box" @click="submit">
								<image src="/static/home/img-submit.png" mode="" class="submit_img"></image>
							</view>
						</view>
					</view>
					<view class="read_check">
						<checkbox-group @change="checkboxGroupChange">
							<label class="read_title">
								<checkbox value="checkMsg" />我已阅读
							</label>
						</checkbox-group>
						<span style="color: #FF7C00;"><span @click="handlerAgreement">《入网协议》</span>
							<span @click="handlerCollect">《信息收集公告》</span></span>
					</view>
				</view>


			</view>
			<!-- 固定按钮 -->
			<view class="fixed_btn_box">
				<view class="fixed_btn" @click="handlerFixed" v-if="fixedButton.status == 1">
					{{ fixedButton.text }}
				</view>
			</view>

			<!-- detail -->
			<view class="detail_img_box">
				<u-parse :html="packageAll.details"></u-parse>
			</view>

			<!-- 领取按钮-套餐1 -->
			<!-- <view class="" v-if="false">
				<view class="receive_btn_box" @click="handlerReceive" v-show="isShowBtn">
					<image src="/static/home/img-button.gif" mode="widthFix" class="receive_btn"></image>
				</view>
			</view> -->

			<!-- 领取按钮-套餐2 -->
			<view class="">
				<view class="receive_btn_box" @click="handlerReceive" v-if="selectStatus == 1">
					<view class="receive_btn">
						选择靓号 包邮到家
					</view>
					<!-- <image src="/static/home/img-button-black.gif" mode="widthFix" class="receive_btn"></image> -->
				</view>
			</view>
		</view>

		<!-- 选号弹窗 -->
		<view class="choose_number_box" v-if="showChooseNumber">
			<view class="">
				<view class="popup_account_box">
					<view class="popup_account_all">
						<!-- <view class="selected_box">
							<view class="selected_title">已选择联通靓号</view>
							<view class="logo_img_box">
								<image src="/static/home/img-logo.png" mode="" class="logo_img"></image>
							</view>
						</view> -->
						<view class="selected_number" v-for="(item, index) in chooseNumbers" :key="index">
							<view class="number_tip">
								<!-- {{ chooseNumbers.phoneNum }} -->
								<span v-for="(items, indexs) in String(item.phoneNum)" :key="indexs"
									:class="[item.phoneColors[indexs] == '1' ? 'number_tip_active' : '']">{{ items }}</span>
							</view>
							<view class="number_advantage">
								{{ item.phoneText }}
							</view>
						</view>

						<view class="acount_con">
							请如实填写以下信息，以便我们及时为您送达
						</view>
						<!-- @input="blurName" -->
						<view class="buy-recipients-all">
							<view class="buy-recipients-input-title">姓名</view>
							<input placeholder="请填写身份证姓名(已加密)" placeholder-style="font-size: 24rpx;"
								v-model="applicantModel.userInfo.recipientsName" @blur="handlerBlurName"
								style="z-index: 999;">
							</input>
						</view>
						<view class="buy-recipients-all">
							<view class="buy-recipients-input-title">联系电话 </view>
							<input placeholder="请填写收件电话(已加密)" placeholder-style="font-size: 24rpx;" maxlength="11"
								v-model="applicantModel.userInfo.recipientsPhone" @input="blurPhone"
								style="z-index: 999;">
							</input>
						</view>
						<view class="" v-if="isShowPersonMsg">
							<!-- <view class="buy-applicant-input-box"
								v-if="applicantModel.userInfo.recipientsName !== applicantModel.userInfo.name">
								<view class="buy-applicant-input-title">身份证姓名</view>
								<input v-model="applicantModel.userInfo.name" :border="false"
									placeholder="请输入身份证姓名(已加密)" placeholder-style="font-size: 24rpx;" />
							</view> -->
							<view class="buy-applicant-input-box">
								<view class="buy-applicant-input-title">身份证</view>
								<input placeholder="请输入身份证号码(已加密)" placeholder-style="font-size: 24rpx;" maxlength="18"
									v-model="applicantModel.userInfo.number" style="z-index: 999;">
								</input>
							</view>
							<view class="buy-recipients-all">
								<view class="buy-recipients-input-title">所在地址</view>
								<picker class="pickerList" mode="multiSelector" :range="newProvinceDataList"
									:value="multiIndex" @change="pickerChange" @columnchange="pickerColumnchange">
									<view class="">{{select}}</view>
								</picker>
							</view>

							<view class="buy-recipients-all">
								<!-- <view class="buy-recipients-input-title">详细地址 </view> -->
								<input placeholder="请输入详细地址(*街道*小区*门牌号)"
									placeholder-style="font-size: 24rpx;color: #c14953;"
									v-model="applicantModel.userInfo.recipientsAddress"
									style="width: 100%; z-index: 999;">
								</input>
							</view>
						</view>

						<view class="read_box">
							<view class="submit_box" @click="submit">
								<image src="/static/home/img-submit.png" mode="" class="submit_img"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="choose_number_close_box" @click="handlerCloseChoose">
				<image src="/static/home/icon-cancel.png" mode="" class="choose_number_close"></image>
			</view>
		</view>

		<!-- 协议、公告弹窗 -->
		<view class="agreement_box" v-if="showAgreement">
			<view class="agreement_content">
				<rich-text :nodes="agreementMsg"></rich-text>
			</view>
			<view class="agreement_close_btn" @click="handlerCloseAgreement">
				<image src="/static/home/icon-cancel.png" mode="" class="agreement_close"></image>
			</view>
		</view>

		<!-- 一键登录弹窗 -->
		<view class="popup_login_box" v-if="showLogin">
			<view class="login_title">
				请先一键登录
			</view>
			<view class="login_btn" @click="handlerLogin">
				一键登录
			</view>

			<view class="popup_close_box" @click="handlerClose">
				<image src="/static/home/icon-cancel.png" mode="" class="popup_close"></image>
			</view>
		</view>

		<!-- 遮罩层 -->
		<view class="mask" v-if="showMask" @click="handlerCloseMask"></view>

		<!-- 参与成功弹窗 -->
		<view class="popup_success_box" v-if="showSuccess">
			<view class="success_con">
				{{ successCon }}
			</view>
			<view class="success_btn" @click="confirmSuccess">
				确定
			</view>
			<view class="close_icon_box" @click="handlerCloseSuccess">
				<image src="/static/home/icon-cancel.png" mode="" class="close_icon"></image>
			</view>
		</view>
	</view>
</template>

<script>
	var QQMapWx = require('@/utils/qqmap-wx-jssdk.js')
	var qqMapsdk = new QQMapWx({
		key: '2QVBZ-CZP67-GSRXY-H52ZO-LKECE-GFBTV', // 生成的秘钥
	})
	import imgUrl from '@/utils/image.js'
	import provinceData from '@/utils/popupActivity.js'
	import baseAgentId from '@/utils/agentId.js'
	export default {
		data() {
			return {
				showMask: false, // 显示遮罩层
				showChooseNumber: false, // 显示选号form弹窗
				packageChooseList: [],
				isActiveIcon: 0,
				searchValue: '', // 搜索
				accountTabList: [{
						id: 0,
						name: '全部',
						type: 'all'
					},
					{
						id: 1,
						name: 'ABC+',
						type: 'ABC+'
					},
					{
						id: 2,
						name: '尾号8',
						type: 'eight'
					},
					{
						id: 3,
						name: '爱情号',
						type: 'love'
					},
					{
						id: 4,
						name: 'AAA+',
						type: 'AAA+'
					},
					{
						id: 5,
						name: 'AA',
						type: 'AA'
					},
					{
						id: 6,
						name: 'ABAB',
						type: 'ABAB'
					},
					{
						id: 7,
						name: 'ABBA',
						type: 'ABBA'
					},
				],
				isActiveAcount: 0,
				accountList: [],
				isAccountList: 0,
				isPreviousBtn: true,
				isNextBtn: false,
				clientHeight: '',
				isShowBtn: false,
				showAccount: false,
				applicantModel: {
					userInfo: {
						chooseNum: '',
						name: '',
						number: '',
						recipientsName: '',
						recipientsPhone: '',
						recipientsAddress: '',
						code: ''
					},
				},
				city: '', // 省市区
				isShowPicker: false,
				readList: [{
					name: '我已阅读并同意'
				}],
				checkMsg: '',
				vcodeBtnName: '验证码',
				countNum: 120,
				showAgreement: false,
				agreementCon: '',
				agreementMsg: '',
				appId: 'ks697213517937611366',
				secret: 'Cw9FGS5TbboBa8Zgb_ZvQQ',
				userCode: '',
				openId: '',
				showLogin: false,
				channeId: '',
				packageObj: {},
				packageAll: {},
				imageUrl: '',
				accountType: 'all',
				isShowChoose: false, // 是否选号
				nextIndex: 0,
				showSuccess: false,
				successCon: '恭喜活动参加成功！我们会快马加鞭为您送达！',
				agreementObj: {},
				agreementMsg: '',
				selectStatus: '',
				isShowPersonMsg: false,
				blurNameMsg: '',
				blurPhoneMsg: '',
				// 通过该字段判断显示套餐1/2/3
				landingTemplateId: '',
				accountCode: '',
				vicePackageId: '',
				qqMapsdkNew: '',
				preemptionType: '',
				// phoneDisabled: true,

				codeTime: 0,
				isActiveChoose: 0,
				buttonId: '',
				fixedButton: '',
				bgcColor: '#000',
				chooseNumbers: [],

				oldpProvinceDataList: provinceData.data,
				newProvinceDataList: [
					[],
					[],
					[]
				],
				multiIndex: [0, 0, 0],
				select: '选择省市区',

				addressData: {
					name: '',
					phone: '',
					address: ''
				},
				binhao: '1',
				agentId: '',
				isPackageAll:false

			}
		},
		onShow() {
			
		},
		onLoad(option) {
			// this.packageAll.package.head_img = 'https://landing.card.zhongtuodianshang.cn/packages/images/3ce5b2180caf1e2fe2c79be07b306c52.png'
			// this.getLocation()
			this.imageUrl = imgUrl
			this.getPageHeight()

			if (option.channe_id) {
				this.packageObj.channe_id = option.channe_id
			} else {
				this.packageObj.channe_id = 32
			}

			if (option.packageId) {
				this.packageObj.packageId = option.packageId
			}

			if (option.clickid) {
				this.packageObj.clickId = option.clickid
			} else {
				this.packageObj.clickId = ''
			}

			if (option.landing_template_code) {
				this.landingTemplateId = option.landing_template_code
			} else {
				this.landingTemplateId = ''
			}

			if (option.account_code) {
				this.accountCode = option.account_code
			} else {
				this.accountCode = ''
			}

			if (option.vice_packageId) {
				this.vicePackageId = option.vice_packageId
			} else {
				this.vicePackageId = ''
			}

			if (option.buttonId) {
				this.buttonId = option.buttonId
			} else {
				this.buttonId = ''
			}

			this.getChanneId()
			this.getPhone()
			this.getAgreementText()
			this.getSendButton()
			if (this.landingTemplateId == 2) {
				this.getOneVicePackage()
			} else {
				this.getOnePackage()
			}

			// 省市区相关参数
			for (let i = 0; i < this.oldpProvinceDataList.length; i++) {
				this.newProvinceDataList[0].push(this.oldpProvinceDataList[i].name);
			}
			for (let i = 0; i < this.oldpProvinceDataList[0].city.length; i++) {
				this.newProvinceDataList[1].push(this.oldpProvinceDataList[0].city[i].name);
			}
			for (let i = 0; i < this.oldpProvinceDataList[0].city[0].area.length; i++) {
				this.newProvinceDataList[2].push(this.oldpProvinceDataList[0].city[0].area[i]);
			}
		},
		onPageScroll(e) {
			// if (e.scrollTop <= 680) {
			// 	this.isShowBtn = false
			// } else if (e.scrollTop > 680) {
			// 	this.isShowBtn = true
			// }
		},
		methods: {
			// 省市区确认事件 start
			pickerChange(e) {
				this.multiIndex = e.detail.value;
			
				this.select =
					`${this.newProvinceDataList[0][this.multiIndex[0]]}${this.newProvinceDataList[1][this.multiIndex[1]]}${this.newProvinceDataList[2][this.multiIndex[2]]}`
			},
			pickerColumnchange(e) {
				// 第一列滑动
				if (e.detail.column === 0) {
					this.multiIndex[0] = e.detail.value
					// this.newProvinceDataList[1] = [];
					this.newProvinceDataList[1] = this.oldpProvinceDataList[this.multiIndex[0]].city.map((item, index) => {
						return item.name
					})
					if (this.oldpProvinceDataList[this.multiIndex[0]].city.length === 1) {
						this.newProvinceDataList[2] = this.oldpProvinceDataList[this.multiIndex[0]].city[0].area.map((item,
							index) => {
							return item
						})
					} else {
						this.newProvinceDataList[2] = this.oldpProvinceDataList[this.multiIndex[0]].city[this.multiIndex[
							1]].area.map((item, index) => {
							return item
						})
					}
					// 第一列滑动  第二列 和第三列 都变为第一个
					this.multiIndex.splice(1, 1, 0)
					this.multiIndex.splice(2, 1, 0)
				}
				// 第二列滑动
				if (e.detail.column === 1) {
					this.multiIndex[1] = e.detail.value
					this.newProvinceDataList[2] = this.oldpProvinceDataList[this.multiIndex[0]].city[this.multiIndex[1]]
						.area.map((item, index) => {
							return item
						})
					// 第二列 滑动 第三列 变成第一个
					this.multiIndex.splice(2, 1, 0)
				}
				// 第三列滑动
				if (e.detail.column === 2) {
					this.multiIndex[2] = e.detail.value
				}
			},
			// 省市区确认事件 end


			// 是否显示按钮和定义按钮文字
			getSendButton() {
				const that = this
				this.$request('/sendButton', {
					buttonId: this.buttonId,
				}, 'POST').then(res => {
					if (res.code == 1) {
						this.fixedButton = res.data
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						return
					}
				})
			},

			// 获取定位
			// getLocation() {
			// 	var _this = this
			// 	uni.getLocation({
			// 		type: 'wgs84',
			// 		success: res => {
			// 			console.log('打印定位哈哈哈哈', res)
			// 			qqMapsdk.reverseGeocoder({
			// 				location: {
			// 					latitude: res.latitude,
			// 					longitude: res.longitude
			// 				},
			// 				success: elem => {
			// 					const {
			// 						result: {
			// 							address_component: {
			// 								province,
			// 								city,
			// 								district
			// 							}
			// 						}
			// 					} = elem // 省市区
			// 					// console.log(elem, '获取省市区')
			// 					const cityResult = elem.result.address_component
			// 					this.select = cityResult.province + cityResult.city +
			// 						cityResult.district
			// 				},
			// 				fail: ress => {
			// 					console.log(ress, '获取省市区失败')
			// 				}
			// 			})
			// 		}
			// 	})
			// },

			// 登录
			getLogin() {
				this.$request('/ksLogin', {
					code: this.userCode,
					appid: this.appId,
					secret: this.secret
				}, 'POST').then(res => {
					uni.setStorageSync('openId', res.open_id)
					this.openId = res.open_id
					this.showLogin = false
					this.showMask = false
					this.submitOrderInsert()
				})
			},

			// 获取渠道
			getChanneId() {
				this.$request('/channeList', {
					channe_id: this.packageObj.channe_id
				}, 'GET').then(res => {
					if (res.code == 1) {
						uni.setStorageSync('channeInfo', res.data)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						return
					}
				})
			},

			// 获取套餐
			getOnePackage() {
				// uni.request({
				// 	url:'https://landing.zibojinchi.com/api/getH5OnePackage',
				// 	data:{
				// 			channe_id: this.packageObj.channe_id,
				// 			package_id: this.packageObj.packageId,
				// 	},
				// 	method:'POST'
				// }).then(res => {
				// 	if (res.data.code == 1) {
				// 		console.log(res)
				// 		// this.packageDetail = res.data.data.package
				// 		this.packageAll = res.data.data.package
				// 		this.selectStatus = res.data.data.package.package.select_status
				// 		this.agentId = res.data.data.package.package.agent_id
				// 	} else {
				// 		uni.showToast({
				// 			title: res.data.msg,
				// 			icon: 'none'
				// 		})
				// 		return
				// 	}
				// })
				const that = this
				this.$request('/getOnePackage', {
					channe_id: this.packageObj.channe_id,
					packageId: this.packageObj.packageId,
				}, 'GET').then(res => {
					if (res.code == 1) {
						console.log(res.package)
						this.packageAll = res.package.package
						console.log('package',this.packageAll)
						this.selectStatus = res.package.package.select_status
						this.agentId = res.package.package.agent_id
						this.isPackageAll = true
						// 暂时隐藏
						// uni.setNavigationBarTitle({
						// 	title: res.package.package.name
						// });
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						return
					}
				})
			},

			// 如果landing_template_code=2的时候调这个接口
			getOneVicePackage() {
				this.$request("/getOneVicePackage", {
					vice_packageId: this.vicePackageId,
					channe_id: this.packageObj.channe_id,
					packageId: this.packageObj.packageId
				}, 'GET').then(res => {
					if (res.code == 1) {
						const packageArr = []
						packageArr.push(res.package, res.vice_package)
						this.packageChooseList = packageArr
						this.packageAll = res.package
						// this.packageAll = packageArr[0]
						this.selectStatus = res.package.select_status
						this.packageObj.packageId = res.package.id
						this.isPackageAll = true

					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						return
					}
				})
			},

			// 获取号码列表
			getPhone() {
				this.$request('/getMobile', {
					packageId: this.packageObj.packageId,
					num: this.searchValue, // 搜索传的号码
					type: this.accountType
				}, 'POST').then(res => {
					if (res.code == 1) {
						this.accountList = res.phoneList[this.nextIndex]
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						return
					}
				})
			},

			// 获取协议
			getAgreementText() {
				this.$request('/agreementText', {}, 'GET').then(res => {
					if (res.code == 1) {
						this.agreementObj = res
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						return
					}
				})
			},

			// 随机选择号码
			getRandPhone() {
				this.$request('/getRandPhone', {
					packageId: this.packageObj.packageId
				}, 'POST').then(res => {
					if (res.code == 1) {
						this.chooseNumbers = res.phoneList
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						return
					}
				})
			},

			// 判断是否预占
			getPreemption() {
				this.$request('/preemption', {
					phonenum: this.applicantModel.userInfo.chooseNum,
					type: this.preemptionType
				}, 'POST').then(res => {
					if (res.code == 1) {} else {
						// uni.showToast({
						// 	title: res.msg,
						// 	icon: 'none'
						// })
						return
					}
				})
			},

			handlerBlurName() {
				const that = this
				if (this.codeTime > 0) {


				} else {
					if (this.applicantModel.userInfo.recipientsName !== '') {
						this.preemptionType = '2'
						this.getPreemption()
						// this.phoneDisabled = false

						that.codeTime = 120
						let timer = setInterval(() => {
							that.codeTime--;
							if (that.codeTime < 1) {
								clearInterval(timer);
								that.codeTime = 0
							}
						}, 1000)
					} else if (this.applicantModel.userInfo.recipientsName == '') {
						this.preemptionType = '1'
						this.getPreemption()
						// this.phoneDisabled = true

						that.codeTime = 30
						let timer = setInterval(() => {
							that.codeTime--;
							if (that.codeTime < 1) {
								clearInterval(timer);
								that.codeTime = 0
							}
						}, 1000)
					}
				}
			},

			blurPhone(e) {
				if (this.applicantModel.userInfo.recipientsPhone.length == 11) {
					this.isShowPersonMsg = true
				}
			},

			// 提交订单
			submitOrderInsert() {
				const that = this
				this.$request('/orderInsert', {
					phone: this.applicantModel.userInfo.chooseNum,
					name: this.applicantModel.userInfo.recipientsName,
					mobile: this.applicantModel.userInfo.recipientsPhone,
					idname: this.applicantModel.userInfo.recipientsName,
					idcard: this.applicantModel.userInfo.number,
					address: this.select,
					detail_address: this.applicantModel.userInfo.recipientsAddress,
					channe_id: this.packageObj.channe_id,
					clickid: this.packageObj.clickId,
					price: this.packageAll.price,
					anchor_id: '',
					open_id: uni.getStorageSync('openId'),
					packageId: this.packageObj.packageId,
					landing_template_code: this.landingTemplateId,
					account_code: this.accountCode,
					agent_id: this.agentId,
					renmian_path: '', // 人面照
					guohuimian_path: '', // 国徽照
					shouchimian_path: '', // 手持照
				}, 'POST').then(res => {
					if (res.code == 1) {
						that.showSuccess = true
						that.showMask = true
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						return
					}
				})
			},

			// 点击查号关闭登录弹窗
			handlerClose() {
				this.showLogin = false
				this.showMask = false
			},

			// 一键登录
			handlerLogin() {
				const that = this
				uni.login({
					force: false,
					success(res) {
						that.userCode = res.code
						that.getLogin()
					},
					fail(res) {
					},
				});
			},

			// 切换流量卡tab
			handlerPackageTab(item, index) {
				this.isActiveChoose = index
				this.isActiveIcon = this.isActiveIcon == index ? 0 : index
				if (this.isActiveIcon == 0) {
					this.packageAll = item
					this.selectStatus = item.package.select_status
					this.packageObj.packageId = item.package.id
				} else if (this.isActiveIcon == 1) {
					this.packageAll = item
					this.selectStatus = item.package.select_status
					this.packageObj.packageId = item.package.id
				}
			},

			// 点击搜索
			handlerSearch() {
				this.getPhone()
			},

			// 选择靓卡类型
			handlerAccountTab(val) {
				this.isActiveAcount = val.id
				this.accountType = val.type
				this.getPhone()
			},

			// 切换号码
			handlerAccountList(item, index) {
				this.chooseNumbers = []
				const that = this
				this.isAccountList = index
				this.applicantModel.userInfo.chooseNum = item.phoneNum
				const arr = []
				arr.push(item)
				this.chooseNumbers = arr
				this.showAccount = true
				this.showChooseNumber = true
				this.showMask = true



				setTimeout(() => {
					if (this.applicantModel.userInfo.recipientsName == '') {
						that.preemptionType = '1'
						that.getPreemption()
						this.phoneDisabled = true
					}
				}, 5000)
				clearTimeout()
				this.phoneDisabled = false
				that.codeTime = 30
				let timer = setInterval(() => {
					that.codeTime--;
					if (that.codeTime < 1) {
						clearInterval(timer);
						that.codeTime = 0
					}
				}, 1000)


				// if (this.applicantModel.userInfo.recipientsName == '') {
				// 	setTimeout(() => {
				// 		if (this.applicantModel.userInfo.recipientsName == '') {
				// 			console.log(this.applicantModel.userInfo.recipientsName == '')
				// 			that.preemptionType = '1'
				// 			that.getPreemption()
				// 			this.phoneDisabled = true
				// 		}
				// 	}, 5000)
				// 	that.codeTime = 30
				// 	let timer = setInterval(() => {
				// 		that.codeTime--;
				// 		if (that.codeTime < 1) {
				// 			clearInterval(timer);
				// 			that.codeTime = 0
				// 		}
				// 	}, 1000)
				// } else {
				// 	this.phoneDisabled = false
				// 	that.codeTime = 120
				// 	let timer = setInterval(() => {
				// 		that.codeTime--;
				// 		if (that.codeTime < 1) {
				// 			clearInterval(timer);
				// 			that.codeTime = 0
				// 		}
				// 	}, 1000)
				// }
			},

			// 上一页
			handlerPrevious() {
				const that = this
				if (this.nextIndex === 0) {
					this.isPreviousBtn = true
					return
				}
				this.nextIndex--
				this.isNextBtn = false
				uni.showToast({
					title: '加载中...',
					icon: 'none',
					duration: 250
				})
				that.getPhone()
			},

			// 下一页
			handlerNext() {
				const that = this
				if (this.nextIndex === 9) {
					this.isNextBtn = true
					return
				}
				this.nextIndex++
				this.isPreviousBtn = false
				uni.showToast({
					title: '加载中...',
					icon: 'none',
					duration: 250
				})
				that.getPhone()
			},

			// 获取当前页面高度
			getPageHeight() {
				const res = uni.getSystemInfo({
					success: (res => {
						this.clientHeight = res.windowHeight - uni.upx2px(80)
					})
				})
			},

			// 点击领取按钮(选号)
			handlerReceive() {
				const that = this
				this.showChooseNumber = true
				this.showMask = true
				this.getRandPhone()
				setTimeout(() => {
					if (this.applicantModel.userInfo.recipientsName == '') {
						that.preemptionType = '1'
						that.getPreemption()
						this.phoneDisabled = true
					}
				}, 5000)
				clearTimeout()
				this.phoneDisabled = false
				that.codeTime = 30
				let timer = setInterval(() => {
					that.codeTime--;
					if (that.codeTime < 1) {
						clearInterval(timer);
						that.codeTime = 0
					}
				}, 1000)
				// if (this.selectStatus == 1) {
				// 	console.log('走1')
				// 	uni.createSelectorQuery().select('#packageDetail').boundingClientRect(data => { //目标位置的节点：类class或者id
				// 		uni.createSelectorQuery().select("#packageBox").boundingClientRect(
				// 			res => { //最外层盒子的节点：类class或者id
				// 				uni.pageScrollTo({
				// 					duration: 100, //过渡时间
				// 					scrollTop: data.top + 200 - res.top, //到达距离顶部的top值,300这个值根据自己情况调

				// 					//scrollTop:data.top - res.top,//如果置顶
				// 				})
				// 			}).exec()
				// 	}).exec()
				// } else if (this.selectStatus == 0) {
				// 	console.log('走2')
				// 	uni.createSelectorQuery().select('#packageDetailNoChoose').boundingClientRect(
				// 		data => { //目标位置的节点：类class或者id
				// 			uni.createSelectorQuery().select("#packageBox").boundingClientRect(
				// 				res => { //最外层盒子的节点：类class或者id
				// 					uni.pageScrollTo({
				// 						duration: 100, //过渡时间
				// 						scrollTop: data.top + 200 - res.top, //到达距离顶部的top值,300这个值根据自己情况调

				// 						//scrollTop:data.top - res.top,//如果置顶
				// 					})
				// 				}).exec()
				// 		}).exec()
				// }

			},

			handlerFixed() {
				const that = this
				this.showChooseNumber = true
				this.showMask = true
				// this.getRandPhone()
				setTimeout(() => {
					if (this.applicantModel.userInfo.recipientsName == '') {
						that.preemptionType = '1'
						that.getPreemption()
						this.phoneDisabled = true
					}
				}, 5000)
				clearTimeout()
				this.phoneDisabled = false
				that.codeTime = 30
				let timer = setInterval(() => {
					that.codeTime--;
					if (that.codeTime < 1) {
						clearInterval(timer);
						that.codeTime = 0
					}
				}, 1000)

			},

			// 选择省市区
			confirmPicker(e) {
				this.select = e.province.label + e.city.label + e.area.label;
			},

			// 入网协议
			handlerAgreement() {
				this.agreementMsg = this.agreementObj.text1
				this.showAgreement = true
				this.showMask = true
			},
			// 信息收集公共
			handlerCollect() {
				this.agreementMsg = this.agreementObj.text2
				this.showAgreement = true
				this.showMask = true
			},

			checkboxGroupChange(e) {
				this.checkMsg = e.target.value[0]
			},

			// 提交
			submit() {
				const that = this
				if (this.applicantModel.userInfo.recipientsName == '') {
					uni.showToast({
						title: '请输入身份证姓名',
						icon: 'none'
					})
					return
				} else if (!(/^[一-龥]{0,}$/.test(this.applicantModel.userInfo.recipientsName))) {
					uni.showToast({
						title: '请输入正确身份证名字',
						icon: 'none'
					})
					return
				} else if (this.applicantModel.userInfo.recipientsPhone == '') {
					uni.showToast({
						title: '请输入收件电话',
						icon: 'none'
					})
					return
				} else if (!(/^[1][3,4,5,6,7,8,9][0-9]{9}$/
						.test(this.applicantModel.userInfo.recipientsPhone))) {
					uni.showToast({
						title: '请输入正确收件电话',
						icon: 'none'
					})
					return
				}
				// else if (this.applicantModel.userInfo.name == '') {
				// 	uni.showToast({
				// 		title: '请输入身份证姓名',
				// 		icon: 'none'
				// 	})
				// 	return
				// }				
				else if (this.applicantModel.userInfo.number == '') {
					uni.showToast({
						title: '请输入身份证号码',
						icon: 'none'
					})
					return
				} else if (!(
						/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
						.test(this.applicantModel.userInfo.number))) {
					uni.showToast({
						title: '请输入正确身份证号码',
						icon: 'none'
					})
					return
				} else if (this.select == '') {
					uni.showToast({
						title: '请选择地址',
						icon: 'none'
					})
					return
				} else if (this.applicantModel.userInfo.recipientsAddress == '') {
					uni.showToast({
						title: '请输入详细地址',
						icon: 'none'
					})
					return
				}
				//  else if (this.checkMsg == false) {
				// 	that.checkMsg = true
				// }

				if (uni.getStorageSync('openId')) {
					that.submitOrderInsert()
				} else {
					this.showLogin = true
					this.showMask = true
				}
			},

			// 关闭弹窗，清空信息
			handlerCloseAccount() {
				// this.applicantModel.userInfo = {}
				// this.select = ''
				this.checkMsg = ''
				this.isShowPersonMsg = false
			},

			// 点击参与成功确定按钮
			confirmSuccess() {
				this.showSuccess = false
				this.showMask = false
				// this.showAccount = false
				// this.applicantModel.userInfo = {}
				// this.select = ''
				this.checkMsg = ''
			},

			// 点击关闭选号弹窗
			handlerCloseChoose() {
				this.showChooseNumber = false
				this.showMask = false
			},

			// 点击遮罩层关闭
			handlerCloseMask() {
				this.showChooseNumber = false
				this.showAgreement = false
				this.showMask = false
				this.showLogin = false
				this.showSuccess = false
			},

			// 关闭服务协议弹窗
			handlerCloseAgreement() {
				this.showAgreement = false
				this.showMask = false
			},

			// 点击查号关闭成功弹窗
			handlerCloseSuccess() {
				this.showSuccess = false
				this.showMask = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	.order_detail_container {
		// background: #000;

		.home_box {
			position: relative;

			.banner_img_box {
				width: 100%;
				// height: 760rpx;

				.banner_img {
					width: 100%;
					// height: 100%;
				}
			}

			.package_tab_box {
				display: flex;
				align-items: center;
				justify-content: space-evenly;
				padding: 20rpx 24rpx;

				.package_tab_all {
					position: relative;
					border-radius: 12rpx;

					.tab_img_box {
						width: 320rpx;
						height: 250rpx;

						.tab_img {
							width: 100%;
							height: 100%;
							border-radius: 10rpx;
						}
					}

					.choose_icon_box {
						position: absolute;
						right: 0;
						top: 0;
						width: 70rpx;
						height: 50rpx;

						.choose_icon {
							width: 100%;
							height: 100%;
						}
					}
				}

				.package_tab_all_active {
					position: relative;
					display: flex;
					flex-direction: column;
					align-items: center;
					width: 50%;
					color: #fff;
					background-image: linear-gradient(to right, #fe9695, #f8407a);
					font-family: my-font;
					border-radius: 12rpx;
					padding: 10rpx 24rpx;
					margin-right: 20rpx;

					.package_title {
						font-size: 32rpx;
						font-weight: 550;
						margin-bottom: 30rpx;

						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}

					.package_detail_title {
						font-size: 28rpx;
						font-style: italic;
					}

					.package_tip_title {
						font-size: 28rpx;
						font-style: italic;
					}

					.choose_icon_box {
						position: absolute;
						right: 0;
						top: 0;
						width: 70rpx;
						height: 50rpx;

						.choose_icon {
							width: 100%;
							height: 100%;
						}
					}
				}
			}

			.package_detail_box {
				// padding: 0 20rpx;

				.package_type_one {

					.package_search_box {
						background: #fff;
						border-radius: 15rpx;
						padding: 20rpx;
						margin: 0 20rpx 40rpx;

						.search_all {
							display: flex;
							align-items: center;
							padding-bottom: 20rpx;

							.search_input {
								display: flex;
								align-items: center;
								width: 530rpx;
								border: 1px solid #f9df97;
								border-radius: 12rpx 0 0 12rpx;
								padding: 0 0 0 20rpx;

								.search_icon_box {
									width: 22rpx;
									height: 22rpx;
									margin-right: 17rpx;

									.search_icon {
										width: 100%;
										height: 100%;
									}
								}
							}

							.search_btn {
								height: 74rpx;
								color: #fff;
								font-size: 28rpx;
								text-align: center;
								line-height: 74rpx;
								background: #fbde95;
								border-radius: 0 12rpx 12rpx 0;
								padding: 0 40rpx;
							}
						}

						.account_tab_all {
							display: flex;
							flex-wrap: wrap;
							justify-content: space-between;

							.account_tab {
								width: 156rpx;
								height: 74rpx;
								background: #fdbf52;
								color: #333;
								font-size: 30rpx;
								text-align: center;
								line-height: 74rpx;
								border-radius: 50rpx;
								margin-bottom: 10rpx;
							}

							.account_tab_active {
								width: 156rpx;
								height: 74rpx;
								background: #fdbf52;
								color: #fff;
								font-size: 30rpx;
								text-align: center;
								line-height: 74rpx;
								border-radius: 50rpx;
								margin-bottom: 10rpx;
							}
						}
					}


					.account_list_box {
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;
						padding: 0 25rpx;

						.account_list_all {
							width: 340rpx;
							background: #fff;
							border: 1px solid transparent;
							border-radius: 12rpx;
							padding: 6rpx 14rpx;
							margin-bottom: 20rpx;
							text-align: center;

							.account_num {
								font-size: 38rpx;
								color: #333;
								text-align: center;
								font-weight: 700;
								font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
								padding-bottom: 12rpx;
							}

							.account_num_active {
								font-size: 38rpx;
								color: #e94a43;
								text-align: center;
								font-weight: 700;
								font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
								padding-bottom: 12rpx;

							}

							.account_tip_box {
								display: flex;
								align-items: center;
								justify-content: space-between;

								.beautiful_account {
									color: #fa5350;
								}

								.left_box {
									display: flex;
									align-items: center;

									.now_price {
										color: red;
										font-weight: 550;
										padding-right: 10rpx;
									}

									.limited_time {
										font-size: 24rpx;
										color: #ad905d;
										text-decoration: line-through;
									}
								}



								.free_collection {
									font-size: 24rpx;
									color: #ed706c;
									background: #fddfd1;
									border-radius: 50rpx;
									padding: 6rpx 10rpx;
								}
							}
						}

						.account_list_all_active {
							width: 340rpx;
							// height: 130rpx;
							background: #fff;
							border: 1px solid #ff0000;
							border-radius: 12rpx;
							padding: 6rpx 14rpx;
							margin-bottom: 20rpx;
							box-shadow: 0px 0 22rpx #ab9078 inset;

							.account_num {
								font-size: 36rpx;
								color: #333;
								text-align: center;
								font-family: Source Han Sans CN;
								padding-bottom: 24rpx;
							}

							.account_num_active {
								font-size: 36rpx;
								color: #ff7900;
								text-align: center;
								font-family: Source Han Sans CN;
								padding-bottom: 24rpx;
							}

							.account_tip_box {
								display: flex;
								align-items: center;
								justify-content: space-between;

								.left_box {
									display: flex;
									align-items: center;

									.now_price {
										color: red;
										font-weight: 550;
										padding-right: 10rpx;
									}

									.limited_time {
										font-size: 24rpx;
										color: #ad905d;
										text-decoration: line-through;
									}
								}

								.free_collection {
									font-size: 24rpx;
									color: #ed706c;
									background: #fddfd1;
									border-radius: 50rpx;
									padding: 6rpx 10rpx;
								}
							}
						}
					}

					.package_page_box {
						display: flex;
						justify-content: space-around;
						padding: 20rpx 0 0 0;

						.previous_page {

							.previous_btn {
								width: 260rpx;
								height: 70rpx;
								line-height: 70rpx;
								font-size: 30rpx;
								border-radius: 40rpx;
							}
						}

						.next_page {

							.previous_btn {
								width: 260rpx;
								height: 70rpx;
								line-height: 70rpx;
								font-size: 30rpx;
								border-radius: 40rpx;
							}
						}
					}

					.read_check {
						display: flex;
						align-items: center;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #262626;
						padding: 40rpx 0 40rpx 30rpx;

						.read_title {
							color: #fff;
						}
					}
				}

				.package_type_two {

					.package_search_box {
						background: #fff;
						border-radius: 15rpx;
						padding: 20rpx;
						margin: 0 20rpx 40rpx;

						.search_all {
							display: flex;
							align-items: center;
							justify-content: center;
							padding-bottom: 20rpx;
							border-bottom: 1px solid #ddd;

							.search_input {
								width: 400rpx;
							}

							.search_btn {
								height: 60rpx;
								color: #fff;
								font-size: 28rpx;
								text-align: center;
								line-height: 60rpx;
								background: #f7dd96;
								border-radius: 0 8rpx 8rpx 0;
								padding: 0 24rpx;
							}
						}

						.account_tab_all {
							display: flex;
							flex-wrap: wrap;
							justify-content: space-between;
							padding-top: 20rpx;

							.account_tab {
								width: 156rpx;
								height: 74rpx;
								background: #f3c165;
								color: #333;
								font-size: 30rpx;
								text-align: center;
								line-height: 74rpx;
								border-radius: 50rpx;
								margin-bottom: 10rpx;
							}

							.account_tab_active {
								width: 156rpx;
								height: 74rpx;
								background: #fdbf52;
								color: #fff;
								font-size: 30rpx;
								text-align: center;
								line-height: 74rpx;
								border-radius: 50rpx;
								margin-bottom: 10rpx;
							}
						}
					}


					.account_list_box {
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;
						padding: 0 25rpx;

						.account_list_all {
							width: 340rpx;
							background: #fff;
							border: 1px solid transparent;
							border-radius: 12rpx;
							padding: 6rpx 14rpx;
							margin-bottom: 20rpx;
							text-align: center;

							.account_num {
								font-size: 38rpx;
								color: #333;
								text-align: center;
								font-weight: 700;
								font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
								padding-bottom: 12rpx;
							}

							.account_num_active {
								font-size: 38rpx;
								color: #e94a43;
								text-align: center;
								font-weight: 700;
								font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
								padding-bottom: 12rpx;

							}

							.account_tip_box {
								display: flex;
								align-items: center;
								justify-content: space-between;

								.beautiful_account {
									color: #fa5350;
								}

								.left_box {
									display: flex;
									align-items: center;

									.now_price {
										color: red;
										font-weight: 550;
										padding-right: 10rpx;
									}

									.limited_time {
										font-size: 24rpx;
										color: #ad905d;
										text-decoration: line-through;
									}
								}

								.free_collection {
									font-size: 24rpx;
									color: #ed706c;
									background: #fddfd1;
									border-radius: 50rpx;
									padding: 6rpx 10rpx;
								}
							}
						}

						.account_list_all_active {
							width: 340rpx;
							// height: 130rpx;
							background: #fff;
							border: 1px solid #ff0000;
							border-radius: 12rpx;
							padding: 6rpx 14rpx;
							margin-bottom: 20rpx;
							box-shadow: 0px 0 22rpx #ab9078 inset;

							.account_num {
								font-size: 36rpx;
								color: #333;
								text-align: center;
								font-family: Source Han Sans CN;
								padding-bottom: 24rpx;
							}

							.account_num_active {
								font-size: 36rpx;
								color: #ff7900;
								text-align: center;
								font-family: Source Han Sans CN;
								padding-bottom: 24rpx;
							}

							.account_tip_box {
								display: flex;
								align-items: center;
								justify-content: space-between;

								.left_box {
									display: flex;
									align-items: center;

									.now_price {
										color: red;
										font-weight: 550;
										padding-right: 10rpx;
									}

									.limited_time {
										font-size: 24rpx;
										color: #ad905d;
										text-decoration: line-through;
									}
								}

								.free_collection {
									font-size: 24rpx;
									color: #ed706c;
									background: #fddfd1;
									border-radius: 50rpx;
									padding: 6rpx 10rpx;
								}
							}
						}
					}

					.package_page_box {
						display: flex;
						justify-content: space-around;
						padding: 20rpx 0 0 0;

						.previous_page {

							.previous_btn {
								width: 260rpx;
								height: 70rpx;
								line-height: 70rpx;
								font-size: 30rpx;
								border-radius: 40rpx;
							}
						}

						.next_page {

							.previous_btn {
								width: 260rpx;
								height: 70rpx;
								line-height: 70rpx;
								font-size: 30rpx;
								border-radius: 40rpx;
							}
						}
					}

					.read_check {
						display: flex;
						align-items: center;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #262626;
						padding: 40rpx 0 40rpx 30rpx;

						.read_title {
							color: #fff;
						}
					}
				}

				.package_type_three {

					.package_search_box {
						background: #fff;
						border-radius: 15rpx;
						padding: 20rpx;
						margin: 0 20rpx 40rpx;

						.search_all {
							display: flex;
							align-items: center;
							justify-content: center;
							margin-bottom: 20rpx;
							border: 1px solid #f9df97;
							border-radius: 12rpx;
							padding-left: 25rpx;

							.search_input {
								width: 530rpx;
							}

							.search_btn {
								width: 180rpx;
								height: 74rpx;
								color: #fff;
								font-size: 30rpx;
								text-align: center;
								line-height: 74rpx;
								background: #fbde95;
								border-radius: 12rpx;
							}
						}

						.account_tab_all {
							display: flex;
							flex-wrap: wrap;
							justify-content: space-between;
							padding-top: 20rpx;

							.account_tab {
								width: 156rpx;
								height: 70rpx;
								background: #f3c165;
								color: #333;
								font-size: 30rpx;
								text-align: center;
								line-height: 70rpx;
								border-radius: 50rpx;
								margin-bottom: 10rpx;
							}

							.account_tab_active {
								width: 156rpx;
								height: 70rpx;
								background: #fdbf52;
								color: #fff;
								font-size: 30rpx;
								text-align: center;
								line-height: 70rpx;
								border-radius: 50rpx;
								margin-bottom: 10rpx;
							}
						}
					}

					.account_list_box {
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;
						padding: 0 25rpx;

						.account_list_all {
							width: 340rpx;
							background: #fff;
							border: 1px solid transparent;
							border-radius: 12rpx;
							padding: 6rpx 14rpx;
							margin-bottom: 20rpx;
							text-align: center;

							.account_num {
								font-size: 38rpx;
								color: #333;
								text-align: center;
								font-weight: 700;
								font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
								padding-bottom: 12rpx;
							}

							.account_num_active {
								font-size: 38rpx;
								color: #e94a43;
								text-align: center;
								font-weight: 700;
								font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
								padding-bottom: 12rpx;

							}

							.account_tip_box {
								display: flex;
								align-items: center;
								justify-content: space-between;

								.beautiful_account {
									color: #fa5350;
								}

								.left_box {
									display: flex;
									align-items: center;

									.now_price {
										color: red;
										font-weight: 550;
										padding-right: 10rpx;
									}

									.limited_time {
										font-size: 24rpx;
										color: #ad905d;
										text-decoration: line-through;
									}
								}

								.free_collection {
									font-size: 24rpx;
									color: #ed706c;
									background: #fddfd1;
									border-radius: 50rpx;
									padding: 6rpx 10rpx;
								}
							}
						}

						.account_list_all_active {
							width: 340rpx;
							// height: 130rpx;
							background: #fff;
							border: 1px solid #ff0000;
							border-radius: 12rpx;
							padding: 6rpx 14rpx;
							margin-bottom: 20rpx;
							box-shadow: 0px 0 22rpx #ab9078 inset;

							.account_num {
								font-size: 36rpx;
								color: #333;
								text-align: center;
								font-family: Source Han Sans CN;
								padding-bottom: 24rpx;
							}

							.account_num_active {
								font-size: 36rpx;
								color: #ff7900;
								text-align: center;
								font-family: Source Han Sans CN;
								padding-bottom: 24rpx;
							}

							.account_tip_box {
								display: flex;
								align-items: center;
								justify-content: space-between;

								.left_box {
									display: flex;
									align-items: center;

									.now_price {
										color: red;
										font-weight: 550;
										padding-right: 10rpx;
									}

									.limited_time {
										font-size: 24rpx;
										color: #ad905d;
										text-decoration: line-through;
									}
								}

								.free_collection {
									font-size: 24rpx;
									color: #ed706c;
									background: #fddfd1;
									border-radius: 50rpx;
									padding: 6rpx 10rpx;
								}
							}
						}
					}

					.package_page_box {
						display: flex;
						justify-content: space-around;
						padding: 20rpx 0 0 0;

						.previous_page {

							.previous_btn {
								width: 260rpx;
								height: 70rpx;
								line-height: 70rpx;
								font-size: 30rpx;
								border-radius: 40rpx;
							}
						}

						.next_page {

							.previous_btn {
								width: 260rpx;
								height: 70rpx;
								line-height: 70rpx;
								font-size: 30rpx;
								border-radius: 40rpx;
							}
						}
					}

					.read_check {
						display: flex;
						align-items: center;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #262626;
						padding: 40rpx 0 40rpx 30rpx;

						.read_title {
							color: #fff;
						}
					}
				}
			}

			.package_page_box {
				display: flex;
				justify-content: space-around;
				padding: 20rpx 0 0 0;

				.previous_page {

					.previous_btn {
						width: 260rpx;
						height: 70rpx;
						line-height: 70rpx;
						font-size: 30rpx;
						border-radius: 40rpx;
					}
				}

				.next_page {

					.previous_btn {
						width: 260rpx;
						height: 70rpx;
						line-height: 70rpx;
						font-size: 30rpx;
						border-radius: 40rpx;
					}
				}
			}


			.read_check {
				display: flex;
				align-items: center;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #262626;
				padding: 40rpx 0 40rpx 30rpx;

				.read_title {
					color: #fff;
				}
			}

			.account_box {
				position: relative;
				margin: 85rpx 32rpx 32rpx;

				.account_tip_img_box {
					position: absolute;
					top: -48rpx;
					left: 50%;
					transform: translateX(-50%);
					width: 439rpx;
					height: 76rpx;

					.account_tip_img {
						width: 100%;
						height: 100%;
					}
				}

				.popup_account_all {
					background: #FFFFFF;
					border-radius: 20rpx;
					padding: 40rpx 40rpx 0;

					.buy-applicant-input-box {
						display: flex;
						align-items: center;
						margin-bottom: 26rpx;
						border-bottom: 1px solid #F0F0F0;
						padding-bottom: 21rpx;

						.buy-applicant-input-title {
							width: 232rpx;
							font-size: 30rpx;
							// margin-right: 55rpx;
						}
					}

					.buy-recipients-all {
						display: flex;
						align-items: center;
						margin-bottom: 15rpx;
						padding: 10rpx 0 21rpx;
						border-bottom: 1px solid #F0F0F0;

						.buy-recipients-input-title {
							width: 232rpx;
							font-size: 30rpx;
						}

						.buy_input_code_input_send {
							font-size: 24rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #4786FF;
						}
					}

					.read_box {
						padding-bottom: 20rpx;

						.read_check {
							display: flex;
							align-items: center;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #262626;

							.read_title {
								color: #fff;
							}
						}

						.submit_box {
							display: flex;
							justify-content: center;
							padding-top: 67rpx;

							.submit_img {
								width: 463rpx;
								height: 94rpx;
							}
						}
					}
				}
			}



			.detail_img_box {
				// padding-bottom: 138rpx;
			}

			.fixed_btn_box {
				display: flex;
				justify-content: center;

				.fixed_btn {
					width: 700rpx;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					background: linear-gradient(-2deg, #FFBB74, #BA7A38);
					color: #000;
					font-weight: 700;
					font-size: 40rpx;
					border-radius: 50rpx;
					margin: 20rpx 0 40rpx;
				}
			}

			// .activity_tip {
			// 	color: #fff;
			// 	font-size: 24rpx;
			// 	text-align: center;
			// 	padding-bottom: 180rpx;
			// }

			.receive_btn_box {
				position: fixed;
				bottom: 24rpx;
				left: 50%;
				transform: translateX(-50%);
				z-index: 600;

				.receive_btn {
					width: 700rpx;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					background: linear-gradient(-2deg, #FFBB74, #BA7A38);
					color: #000;
					font-weight: 700;
					font-size: 40rpx;
					border-radius: 50rpx;
				}
			}
		}

		.choose_number_box {
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			background: #fff;
			border-radius: 24rpx;
			z-index: 999;
			width: 700rpx;

			.popup_account_all {
				padding: 26rpx 30rpx 0;

				.selected_box {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.selected_title {
						color: #000;
						font-size: 30rpx;
						font-weight: 550;
						font-family: Microsoft system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
						padding-right: 10rpx;
					}

					.logo_img_box {
						width: 244rpx;
						height: 56rpx;

						.logo_img {
							width: 100%;
							height: 100%;
						}
					}
				}

				.selected_number {
					display: flex;
					flex-direction: column;
					align-items: center;
					padding-top: 30rpx;

					.number_tip {
						font-size: 44rpx;
						font-weight: 700;
						font-family: Microsoft YaHei;
					}

					.number_tip_active {
						color: #d53829;
						font-size: 44rpx;
						font-weight: 700;
						font-family: Microsoft YaHei;
					}

					.number_advantage {
						color: #d53829;
						font-size: 32rpx;
						font-weight: 550;
						padding: 10rpx 0 0;
					}
				}

				.acount_con {
					font-size: 24rpx;
					color: #888;
					text-align: center;
					padding: 20rpx 0 30rpx;
				}

				.buy-applicant-input-box {
					display: flex;
					align-items: center;
					margin-bottom: 26rpx;
					border-bottom: 1px solid #F0F0F0;
					padding-bottom: 21rpx;

					.buy-applicant-input-title {
						width: 232rpx;
						font-size: 30rpx;
						// margin-right: 55rpx;
					}
				}

				.buy-recipients-all {
					display: flex;
					align-items: center;
					margin-bottom: 15rpx;
					padding: 10rpx 0 21rpx;
					border-bottom: 1px solid #F0F0F0;

					.buy-recipients-input-title {
						width: 232rpx;
						font-size: 30rpx;
					}

					.buy_input_code_input_send {
						font-size: 24rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #4786FF;
					}
				}

				.read_box {
					padding-bottom: 20rpx;

					.read_check {
						display: flex;
						align-items: center;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #262626;

						.read_title {
							color: #fff;
						}
					}

					.submit_box {
						display: flex;
						justify-content: center;
						padding-top: 67rpx;

						.submit_img {
							width: 463rpx;
							height: 94rpx;
						}
					}
				}
			}

			.choose_number_close_box {
				position: absolute;
				top: -72rpx;
				right: 0;
				width: 50rpx;
				height: 50rpx;

				.choose_number_close {
					width: 100%;
					height: 100%;
				}
			}
		}

		.agreement_box {
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 700rpx;
			height: 700rpx;
			background: #fff;
			border-radius: 12rpx;
			padding: 20rpx 30rpx 20rpx;
			z-index: 999;

			.agreement_content {
				height: 672rpx;
				overflow: scroll;
			}

			.agreement_close_btn {
				position: absolute;
				top: -72rpx;
				right: 0;
				width: 50rpx;
				height: 50rpx;

				.agreement_close {
					width: 100%;
					height: 100%;
				}
			}
		}

		.popup_login_box {
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 500rpx;
			background: #fff;
			padding: 40rpx 0 30rpx;
			border-radius: 8rpx;
			z-index: 999;

			.login_title {
				font-size: 32rpx;
				color: #333;
				padding-bottom: 26rpx;
			}

			.login_btn {
				width: 340rpx;
				height: 80rpx;
				border-radius: 12rpx;
				background: #fbbf52;
				color: #fff;
				text-align: center;
				line-height: 80rpx;
			}

			.popup_close_box {
				position: absolute;
				top: -68rpx;
				right: 0;
				width: 50rpx;
				height: 50rpx;

				.popup_close {
					width: 100%;
					height: 100%;
				}
			}
		}

		/* 遮罩层*/
		.mask {
			background-color: rgba(0, 0, 0, 0.7);
			position: fixed;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 998;
		}

		// 成功弹窗
		.popup_success_box {
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 500rpx;
			background: #fff;
			z-index: 999;
			padding: 30rpx 20rpx;
			border-radius: 8rpx;

			.success_con {
				font-size: 30rpx;
				color: #000;
				font-weight: 550;
				text-align: center;
			}

			.success_btn {
				height: 60rpx;
				background: #4786FF;
				color: #fff;
				font-size: 28rpx;
				line-height: 60rpx;
				text-align: center;
				border-radius: 40rpx;
				margin-top: 30rpx;
			}

			.close_icon_box {
				position: absolute;
				top: -54rpx;
				right: 0;
				width: 40rpx;
				height: 40rpx;

				.close_icon {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>